<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发布订阅模式</title>
</head>
<body>
  <script>
    // 模拟自定义事件
    class EventEmitter {
      constructor() {
        this.subs = {} // { 'eventType': [handler1, handler2] }
      }

      /**
       * 注册事件
       * @param {string} 事件名
       * @param {fn} 事件函数
       */
      $on(eventType, hanlder) {
        // 判断是否有事件，若没有则需保证事件的值是个数组，方便以后扩展
        this.subs[eventType] = this.subs[eventType] || []
        this.subs[eventType].push(hanlder)
      }

      /**
       * 触发事件
       * @param {string} 事件名
       */
      $emit(eventType) {
        // 遍历执行
        this.subs[eventType].forEach(hanlder => {
          hanlder()
        })
      }
    }

    const em = new EventEmitter()
    em.$on('click', () => {
      console.log('click1')
    })
    em.$on('click', () => {
      console.log('click2')
    })

    em.$emit('click')
  </script>
</body>
</html>